<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-row>
        <el-form inline size="small">
          <el-form-item label="文件格式：">

            <el-radio-group v-model="listParam.type" @change="radioChange" size="small">
              <el-radio-button label="1">图片</el-radio-button>
              <el-radio-button label="2">视频</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item class="el-form-item-align-right">
            <el-button size="mini" type="primary" @click="confirmChoose" v-if="this.use==='choose'">使用选中文件</el-button>
          </el-form-item>
          <el-form-item class="el-form-item-align-right">
            <el-upload action="" :http-request="handlerUpload" :show-file-list="false" :multiple="true">
              <el-button icon="el-icon-upload2
" size="mini" type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="file-list">
          <template v-if="listData.list.length>0">
            <div :class="chooseFile.includes(item)?'active':''" @click.stop="handlerChoose(item)" class="file-item" v-for="item in listData.list" :key="item.id">
              <i @click.stop="handlerDelete(item.id)" class="el-icon-delete"></i>
              <el-image v-if="item.fileType===1" :preview-src-list="use==='choose'?[]:[imageUrl+  item.url]" :src="imageUrl+item.url" class="pic"
                        fit="contain" referrerpolicy="no-referrer"></el-image>
              <video v-if="item.fileType===2" class="pic" :src="imageUrl+item.url" controls="true" autoplay="false"></video>
              <div :title="item.name" class="file-name">{{item.name}}</div>
            </div>
          </template>
          <el-empty style="margin: 0 auto" v-else></el-empty>
        </div>
      </el-row>
      <el-row>
        <el-pagination
            :current-page="listParam.page"
            :page-sizes="[20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listData.count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>
<script>
import {constant} from "@/api/constant";
import {deleteFile, getFileList, uploadFile} from "@/api/file";


export default {
  props:{
    use:{
      default:null,
    },
    multiple:{
      default:false,
    },
    moduleId:{
      default:'',
    },
    businessId:{
      default:'',
    }
  },
  data(){
    return{
      chooseFile:[],
      type:[{
        id:1,
        name:'图片'
      },{
        id:2,
        name:'视频'
      }],
      excel:require('@/assets/imgs/excel.png'),
      pdf:require('@/assets/imgs/PDF.png'),
      word:require('@/assets/imgs/word.png'),
      other:require('@/assets/imgs/file.png'),
      typeLoading:false,
      listParam:{
        type:1,
        page:1,
        limit:10,
        moduleId:'',
        businessId:''
      },
      listData:{list:[],count:0},
      tableLoading:false,
      imageUrl: '',

    }
  },
  watch:{
    "listParam.type":{
      handler(){
        this.getList()
      }
    }
  },
  mounted() {
    if(this.moduleId&&this.moduleId!=null&&this.moduleId!='')
    {
      this.listParam.moduleId = this.moduleId
    }  if(this.businessId&&this.businessId!=null&&this.businessId!='')
    {
      this.listParam.businessId = this.businessId
    }
    this.getType();
    this.getList();
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
  },
  methods:{
    radioChange(val){
      this.$set(this.listParam, "type", val);
      this.getList();

      /*switch (val){
        case '1':
          this.$set(this.tableData, "attType", "jpg,jpeg,gif,png,bmp,PNG,JPG");
          this.getFileList();
          break;
        case '2':
          this.$set(this.tableData, "attType", "mp4,avi,flv,wmv");
          this.getFileList();
          break;
        case '3':
          this.$set(this.tableData, "attType", "pdf,doc,docx,xls,xlsx,PDF,DOC,DOCX,XLS,XLSX");
          this.getFileList();
          break;
      }*/
    },
    confirmChoose(){
      if(this.chooseFile.length==0){
        this.$message.warning('请至少选择一个文件');
        return;
      }
      this.$emit('chooseFile',this.chooseFile)
    },
    handlerChoose(file){
      if(this.use!=='choose'){
        return;
      }
      if(this.chooseFile.includes(file)){
        this.chooseFile.splice(this.chooseFile.indexOf(file.url),1)
      }else{
        if(!this.multiple&&this.chooseFile.length==1){
          this.$message.warning('最多只能选择一个文件');
          return;
        }
        this.chooseFile.push(file);
      }
    },
    handlerUpload(event){
      let file=event.file;
      if(file.size/1024>50*1024){
        this.$message.warning('单个文件大小不能超过50MB');
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data=new FormData();
      data.append('file',file);
      if(this.moduleId)
      {
        data.append('moduleId',this.moduleId);
      }
      if(this.businessId)
      {
        data.append('businessId',this.businessId);
      }
      uploadFile(data).then(()=>{
        this.$message.success('上传成功')
        this.getList();
      }).finally(()=>{
        loading.close();
      })
    },
    getList(){
      this.tableLoading=true
      getFileList(this.listParam).then(res=>{
        this.listData.list=res.list;
        this.listData.count=res.count;
      }).finally(()=>{
        this.tableLoading=false
      })
    },
    getType(){
      this.typeLoading=true
      constant({name:'FILE_TYPE'}).then(res=>{
        this.type=res;
      }).finally(()=>{
        this.typeLoading=false;
      })
    },
    handleSizeChange(val) {
      this.listParam.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParam.page = val
      this.getList()
    },
    handlerDelete(id){

      const loading = this.$loading({
        lock: true,
        text: "删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      deleteFile(id).then(()=>{
        this.$message.success('删除成功');
        this.getList();
      }).finally(()=>{
        loading.close()
      })

      // this.$confirm('确认删除该文件吗?').then(()=>{
      //   const loading = this.$loading({
      //     lock: true,
      //     text: "删除中",
      //     spinner: "el-icon-loading",
      //     background: "rgba(0, 0, 0, 0.7)",
      //   });
      //

      // })
    }
  }
}
</script>
<style scoped lang="scss">
.file-list{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .file-item.active{
    border-radius: 5px;
    border: 2px solid #409EFF;
    .pic{
      width: 126px;
      height: 126px;
    }
  }
  .file-item{
    .pic{
      width: 130px;
      height: 130px;
    }
    .file-name{
      width: 100%;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    width: 130px;
    height: 150px;
    margin-right: 10px;
    margin-bottom:10px;
    position: relative;
    .el-icon-delete{
      cursor: pointer;
      position: absolute;
      right: 3px;
      top: 3px;
      font-size: 18px;
      color: #fff;
      text-shadow: 0 0 3px black;
      z-index: 99;
    }
  }
}
</style>
